/*

 示例

 {
 "id": "test",
 "type": "HeadView",
 "leftWord":"左边",
 "rightWord":"右边",
 "leftIcon": "icon-back",
 "rightIcon": "icon-right",
 "titleName":"标题名称"
 }
 */
define(['./BaseView', 'jquery'], function(BaseView, $) {
    require('../../less/header.less');

    return BaseView.extend({
        type: "HeadView",
        events: {
            'click .left': 'back',
            'click .close-window': 'close'
        },
        back: function () {
            $('.close-window').show();
            window.pageIndex = 1;
            Backbone.history.history.back();
        },
        close: function () {
            var data = {
                function: 'closePage'
            };
            window.WebViewJavascriptBridge.send(JSON.stringify(data), function (res) {});
        },
        initialize: function () {
            var me = this;
        },
        render: function () {
            var lt = this.options.leftIcon;
            var rt = this.options.rightIcon;
            var nPage = this.currentPage.id;
            var closeWord = this.options.closeWord || '关闭';
            var closeStyle = window.pageIndex === 1 ? '"display: table"' : '"display: none"';
            var leftWord = this.options.leftWord ? this.options.leftWord : '';
            var rightWord = this.options.rightWord ? this.options.rightWord : '';
            var leftIcon = this.options.leftIcon ? '<i class="' + lt + '"></i>' : '<i class="icon-back"></i>';
            var rightIcon = this.options.rightIcon ? '<i class="' + rt + '"></i>' : '';
            var html = `<div class="headview">
                <div class="left">
                    ${leftIcon}
                    <span>${leftWord}</span>
                </div>
                <div class="close-window" style=${closeStyle}>
                    <span>${closeWord}</span>
                </div>
                 <h1 class="title">${this.options.titleName}</h1>
                <div class="right">
                    <span>${rightWord}</span>
                    ${rightIcon}
                    </div>
            </div>`;
            this.$el.append(html);
            return this;
        },
    });
});
